<template>
  <el-col :span="10">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <span class="font-semibold">{{
            $t('pageFirmware.cardTitleRunning')
          }}</span>
        </div>
      </template>
      <dl class="mb-0">
        <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
        <dd class="mb-0">{{ runningVersion }}</dd>
      </dl>
    </el-card>
  </el-col>
  <el-col :span="10">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <span class="font-semibold">{{
            $t('pageFirmware.cardTitleBackup')
          }}</span>
        </div>
      </template>
      <dl class="mb-0">
        <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
        <dd class="mb-0">{{ backupVersion }}</dd>
      </dl>
    </el-card>
  </el-col>
</template>

<script setup lang="ts">
import { useFirmwareStore } from '@/store/Settings/FirmwareStore';
import { useI18n } from 'vue-i18n';

const i18n = useI18n();
const firmwareStore = useFirmwareStore();
defineProps<{ isPageDisabled: Boolean }>();

const running = computed(() => firmwareStore.activeBmcFirmware);
const backup = computed(() => firmwareStore.backupBmcFirmware);
const runningVersion = computed(() => running.value?.version || 'none');
const backupVersion = computed(() => backup.value?.version || 'none');

const switchToRunning = () => {
  const timerId = setTimeout(() => {
    ElNotification({
      title: i18n.t('pageFirmware.toast.verifySwitch'),
      message: i18n.t('pageFirmware.toast.verifySwitchMessage'),
      type: 'info',
    });
  }, 60000);

  firmwareStore
    .switchBmcFirmwareAndReboot()
    .then(() =>
      ElNotification({
        title: i18n.t('pageFirmware.toast.rebootStarted'),
        message: i18n.t('pageFirmware.toast.rebootStartedMessage'),
        type: 'success',
      }),
    )
    .catch(({ message }: { message: string }) => {
      ElNotification({
        title: 'Error',
        message,
        type: 'error',
      });
      clearTimeout(timerId);
    });
};
</script>
